<template>
  <div class="select">
    <el-select
      v-model="selectedStoreId"
      placeholder="请选择门店"
      style="width: 240px"
      @change="handleStoreChange"
      ref="selectedStoreID"
    >
      <el-option
        v-for="store in storeOptions"
        :key="store.storeID"
        :label="store.storeName"
        :value="store.storeID"
      />
    </el-select>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup(props, { emit }) {
    const selectedStoreId = ref('');
    const storeOptions = ref([]);

    // 获取门店数据
    const fetchStores = async () => {
      try {
        const response = await axios.get('/stores'); // 直接使用导入的axios实例
        storeOptions.value = response.data.map(store => ({
          storeID: store.storeID,
          storeName: store.storeName,
        }));
      } catch (error) {
        console.error('Failed to fetch stores:', error);
      }
    };
    const handleStoreChange = (value) => {
       selectedStoreId.value = value; // 更新selectedStoreId的值
       emit('update:selectedStore', value);
    };

    onMounted(() => {
      fetchStores();
    });

    return {
      selectedStoreId,
      storeOptions,
      handleStoreChange,
    };
  },
};
</script>

<style scoped>
.select{
  display: inline-block;
  padding: 0;
  flex-wrap: wrap;
}
</style>